<template>
    <div>
        <span style="cursor: pointer;" @click="clickTreeNode">
            <span :style="offset"><Icon :type="nodeClass" size="14" /></span>
        </span>
        <Checkbox
            :indeterminate="false"
            :value="row._checked || false"
            @on-change="toggleChecked">{{name}}</Checkbox>
    </div>
</template>
<script>
export default {
  props: {
    name: String,
    row: null
  },
  data () {
    return {
            	treeNodeClass: 'md-arrow-dropright'
    }
  },
  methods: {
    clickTreeNode () {
      if (this.row._isExpand) {
                	this.row._isExpand = false
        this.$emit('on-toggle-expand', this.row, false)
      } else {
                	this.row._isExpand = true
        this.$emit('on-toggle-expand', this.row, true)
      }
    },
    toggleChecked (isChecked) {
      this.$emit('on-toggle-checked', this.row, isChecked)
    }
  },
  computed: {
    // 计算属性的 getter
    offset: function () {
			  // `this` 指向 vm 实例
			  return 'margin-right: 5px; margin-left: ' + 20 * (this.row._level || 1) + 'px'
    },
    nodeClass: function () {
      // debugger
      return this.row._isExpand ? 'md-arrow-dropdown' : 'md-arrow-dropright'
    }

  }
}
</script>
